<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '物流信息',
  },
  navigationBarRightButton: {
    hide: true,
  },
}
</route>
<template>
  <view
    class="w-full h-full bg-white overflow-hidden box-border"
    :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
  >
    <view class="w-full h-full pos-relative z-1 bg-#F6F6F8">
      <wd-navbar @click-left="handleClickLeft">
        <template #title>
          <text class="text-gray-333 font-size-36 font-500">物流信息</text>
        </template>
        <template #left>
          <wd-icon name="chevron-left" class="text-gray-333 font-size-44"></wd-icon>
        </template>
      </wd-navbar>
      <view class="w-full h-full home-content ps-b-20">
        <view class="w-full bg-white mg-t-20">
          <view class="w-full p-x-28">
            <view class="flex justify-start p-y-34">
              <wd-img
                :width="'176rpx'"
                :height="'176rpx'"
                custom-class="b-rd-8 overflow-hidden"
                :src="productData.pic"
              />
              <view class="wr-500 flex justify-between flex-col mg-l-24">
                <view
                  class="flex justify-between items-start font-size-28 font-500 text-gray-333 line-h-40"
                >
                  <view>{{ productData.name }}</view>
                  <!-- <view class="mg-l-50">￥50</view> -->
                </view>
                <view
                  class="flex justify-start items-start font-size-28 font-400 text-black-1 line-h-36"
                >
                  <view>快递公司：</view>
                  <view>{{ expressData?.expressCompanyName }}</view>
                </view>
                <view
                  class="flex justify-start items-center font-size-28 font-400 text-black-1 line-h-36"
                >
                  <view>快递单号：</view>
                  <view>{{ expressData?.number }}</view>
                  <view class="wr-2 hr-24 bg-gray-999 mg-l-16 mg-r-16"></view>
                  <view class="text-blue-1">复制</view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="w-full hr-900 overflow-y-auto bg-white p-x-28 p-y-32 border-box mg-t-20">
          <wd-steps :active="1" vertical>
            <wd-step v-for="(item, index) in expressData?.logisticsTraceDetails" :key="index">
              <template v-slot:icon>
                <view class="wr-60 hr-60" v-if="item.logisticsStatus === '已签收'">
                  <image
                    width="100%"
                    height="100%"
                    src="../../static/images/icons/step-success.png"
                  />
                </view>
                <view
                  class="w-full h-full flex justify-center items-center"
                  v-if="item.logisticsStatus === '运输中' || item.logisticsStatus === '派件中'"
                >
                  <view class="wr-60 hr-60">
                    <image
                      width="100%"
                      height="100%"
                      src="../../static/images/icons/step-transport.png"
                    />
                  </view>
                </view>
                <view
                  class="w-full h-full flex justify-center items-center"
                  v-if="item.logisticsStatus === '已揽收'"
                >
                  <view
                    class="wr-42 hr-42 b-rd-21 b-solid-#D8D8D8-2 flex justify-center items-center"
                  >
                    <view class="wr-24 hr-24 b-solid-#D8D8D8-2 b-rd-12"></view>
                  </view>
                </view>
              </template>
              <template v-slot:title>
                <view
                  class="text-blue-1 font-size-32 font-500 line-h-44 flex justify-start items-center"
                  v-if="item.logisticsStatus === '已签收'"
                >
                  <text v-if="item.logisticsStatus">{{ item.logisticsStatus }}</text>
                  <text class="font-size-24 line-h-34 mg-l-24">{{ item.logisticsStatus }}</text>
                </view>
                <view
                  class="text-gray-999 font-size-32 font-500 line-h-44 flex justify-start items-center"
                  v-if="
                    item.logisticsStatus === '运输中' ||
                    item.logisticsStatus === '派件中' ||
                    item.logisticsStatus === '已揽收'
                  "
                >
                  <text v-if="item.logisticsStatus">{{ item.logisticsStatus }}</text>
                  <text class="font-size-24 line-h-34 mg-l-24">{{ item.time }}</text>
                </view>
              </template>
              <template v-slot:description>
                <view
                  class="font-size-24 font-500 line-h-44 flex justify-start items-center"
                  :class="{
                    'text-gray-999': item.status === 0 || item.status === 1,
                    'text-gray-333': item.status === 2,
                  }"
                >
                  <text>{{ item.desc }}</text>
                </view>
              </template>
            </wd-step>
          </wd-steps>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getExpressInfo } from '@/service/order/order'

defineOptions({
  name: 'OrderDetail',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
const handleClickLeft = () => {
  uni.navigateBack()
}
const productData: any = ref({})
onLoad((e: any) => {
  const id: any = e.id
  const type: any = e.type
  getData(id, type)
  const orderExpress = uni.getStorageSync('OrderExpress')
  if (orderExpress) {
    const obj: any = JSON.parse(orderExpress)
    if (obj?.orderGoods) {
      productData.value = obj?.orderGoods[0]
    }
    uni.removeStorageSync('OrderExpress')
  }
})
const expressData: any = ref({})
const getData = (id: any, type: any) => {
  getExpressInfo(id, type).then((res: any) => {
    if (res.data) {
      res.data?.logisticsTraceDetails.reverse()
      expressData.value = res.data
    }
  })
}
</script>

<style scoped lang="scss">
.home-content {
  height: calc(100% - var(--wot-navbar-height, 88rpx));
  overflow: auto;
}
.box-bg {
  background: linear-gradient(138deg, #7195f8 0%, #aeb0ff 100%);
}
::v-deep .wd-search {
  padding: 0 !important;
  background: rgba(255, 255, 255, 0) !important;
}
::v-deep .wd-button {
  width: 100% !important;
  height: 100% !important;
}
::v-deep .wd-step__icon {
  display: flex;
  justify-content: center;
}
::v-deep .wd-step__content {
  padding-left: 24rpx !important;
}
</style>
